/**
 * @description 单选框 右侧属性面版组件
 * @author 大肘子
 */

import React, { FC, useEffect } from "react";
import { QuestionRadioType, optionType } from "./type";
import { Form, Input, Checkbox, Select, Button, Space } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";

const PropsComponent: FC<QuestionRadioType> = (props) => {
  const { title = "", options = [], defaultselected = null, isvertical = false, onchange, disabled } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue({ options, title, isvertical, defaultselected });
  }, [title, options, isvertical, defaultselected]);
  function handleValueChange() {
    console.log(form.getFieldsValue());
    if (onchange) {
      const newvalues = form.getFieldsValue() as QuestionRadioType;
      const { options = [] } = newvalues;
      options.forEach((item: optionType) => {
        if (item.value) return;
        item.value = String(Math.floor(Math.random() * 100000000)).padStart(8, "0");
      });
      onchange(newvalues);
    }
  }

  return (
    <Form layout="vertical" initialValues={{ options, title, isvertical, defaultselected }} onValuesChange={handleValueChange} form={form} disabled={disabled}>
      <Form.Item label="标题" name="title" rules={[{ required: true, message: "请输入..." }]}>
        <Input />
      </Form.Item>

      <Form.Item label="选项">
        <Form.List name="options">
          {(fields, { add, remove }) => {
            return (
              <>
                {fields.map(({ key, name }, index) => {
                  return (
                    <Space key={key} align="baseline">
                      <Form.Item
                        name={[name, "text"]}
                        rules={[
                          { required: true, message: "请输入" },
                          {
                            validator(_, value) {
                              const { options = [] } = form.getFieldsValue();
                              let num = 0;
                              options.forEach((item: optionType) => {
                                if (item.text == value) {
                                  num++;
                                }
                              });
                              if (num == 1) {
                                return Promise.resolve();
                              }
                              return Promise.reject(new Error("和其他选项重复了"));
                            },
                          },
                        ]}
                      >
                        <Input placeholder="请输入"></Input>
                      </Form.Item>
                      {index > 1 && <MinusCircleOutlined onClick={() => remove(name)} />}
                    </Space>
                  );
                })}
                <Form.Item>
                  <Button type="dashed" onClick={() => add({ text: "", value: "" })} block icon={<PlusOutlined />}>
                    添加选项
                  </Button>
                </Form.Item>
              </>
            );
          }}
        </Form.List>
      </Form.Item>
      <Form.Item label="默认选中" name="defaultselected">
        <Select
          options={options.map((c: optionType) => {
            const obj = {
              value: c.value,
              label: c.text,
            };
            return obj;
          })}
        ></Select>
      </Form.Item>

      <Form.Item name="isvertical" valuePropName="checked">
        <Checkbox>竖直排列</Checkbox>
      </Form.Item>
    </Form>
  );
};

export default PropsComponent;
